/* goback() { router.go(-1) } */
<template>
  <div class="wrapper">
    <el-row>
      <el-col :span="24">
        <div class="header">
          <h3 style="float: left">项目申请基本信息查看</h3>
          <el-button
            size="small"
            round
            style="background-image: linear-gradient(#e9f0e9, white);float:right; margin: 14px 50px 0 0;"
            @click="back()"
            >返 回</el-button
          >
          <!-- <el-button round style="background: azure;float:right; margin-right: 50px;" @click="goback()">返 回</el-button> -->
          <!-- <h5 class="title">您当前查看的项目是<em style="color: #367fa9">{{title}}</em></h5> -->
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div class="intro">
          <font size="4.7" face="微软雅黑">
            <strong>基本数据</strong>
          </font>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form
          style="padding-left:180px"
          :model="form"
          size="medium"
          ref="form"
          label-width="100px"
          class="demo-ruleForm"
          :disabled="true"
        >
          <el-col :span="7">
            <el-form-item label="课题名称" prop="title">
              <el-input
                class="cell-width"
                v-model="form.title"
                prefix-icon="el-icon-postcard"
                placeholder="请勿超过40个汉字"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="研究方向" prop="research_direction">
              <el-input
                class="cell-width"
                v-model="form.research_direction"
                prefix-icon="el-icon-rank"
                placeholder="请输入研究方向"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="主题词" prop="theme">
              <el-input
                class="cell-width"
                v-model="form.theme"
                prefix-icon="el-icon-attract"
                placeholder="请输入主题词，以分号隔开（至多四个）"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="项目类别">
              <el-input
                class="cell-width"
                v-model="form.support"
                prefix-icon="el-icon-postcard"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="计划完成时间">
              <el-input
                class="cell-width"
                v-model="form.finish_time"
                prefix-icon="el-icon-date"
                placeholder=""
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="字数">
              <el-input
                style="width: 77%"
                v-model.number="form.word_count"
                prefix-icon="el-icon-document-copy"
                placeholder="请输入最终成果字数"
              ></el-input>
              <span>
                <strong>(千字)</strong>
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="最终成果形式">
              <el-input
                class="cell-width"
                v-model="form.result"
                prefix-icon="el-icon-menu"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" class="apply_expense">申报成果介绍</el-col>
      <el-col :span="22">
        <template>
          <div class="editor">
            <!-- this.$refs.ue.getUEContent()取编辑框数据 -->
            <UE :defaultMsg="defaultMsg" :config="config" ref="ue"></UE>
          </div>
        </template>
      </el-col>
    </el-row>
    <!-- <el-row>
      <el-col :span="24" class="apply_expense" style="padding-top:20px">负责人信息（{{userInfo.username}}）</el-col>
      <el-col :span="24">
        <el-form :model="formPer" :disabled="true">
          <table class="content" border cellspacing="0" width="77%">
            <tr>
              <td class="left">
                <span class="red">性别</span>
              </td>
              <td class="right">
                <el-select v-model="formPer.sex">
                  <el-option value="1">男</el-option>
                  <el-option value="2">女</el-option>
                </el-select>
              </td>
              <td class="left">
                <span class="red">工作单位</span>
              </td>
              <td class="right">
                <el-input
                  type="text"
                  v-model="formPer.sch"
                ></el-input>
              </td>
            </tr>
            <tr>
              <td class="left">
                <span class="red">民族</span>
              </td>
              <td class="right">
                <el-input
                  type="text"
                  v-model="formPer.nation"
                ></el-input>
              </td>
              <td class="left">
                <span class="red">职务级别</span>
              </td>
              <td class="right">
                <el-input
                  type="text"
                  v-model="formPer.jobrank"
                ></el-input>
              </td>
            </tr>
            <tr>
              <td class="left">
                <span class="red">出生日期</span>
              </td>
              <td class="right">
                <el-input
                  type="text"
                  v-model="formPer.birth"
                ></el-input>
              </td>
              <td class="left">
                <span class="red">入职时间</span>
              </td>
              <td class="right">
                <el-input
                  type="text"
                  v-model="formPer.majortime"
                ></el-input>
              </td>
            </tr>
            <tr>
              <td class="left">
                <span class="red">政治面貌</span>
              </td>
              <td class="right">
                <el-input
                  type="text"
                  v-model="formPer.politics"
                ></el-input>
              </td>  
              <td class="left">
                <span class="red">联系电话</span>
              </td>
              <td class="right">
                <el-input
                  type="text"
                  v-model="formPer.office"
                ></el-input>
              </td>
            </tr>
            <tr>
              <td class="left">
                <span class="red">最后学位</span>
              </td>
              <td class="right">
                <el-input
                  type="text"
                  v-model="formPer.degree"
                ></el-input>
              </td>
              <td class="left">
                <span class="red">通讯地址</span>
              </td>
              <td class="right">
                <el-input
                  type="text"
                  v-model="formPer.address"
                ></el-input>
              </td>
            </tr>
            <tr>
              <td class="left">
                <span class="red">最后学历</span>
              </td>
              <td class="right">
                <el-input
                  type="text"
                  v-model="formPer.edu"
                ></el-input>
              </td>
               <td class="left">
                <span class="red">个人qq</span>
              </td>
              <td class="right">
                <el-input
                  type="text"
                  v-model="formPer.qq"
                ></el-input>
              </td> 
            </tr>
            <tr>
              <td class="left">
                <span class="red">行政职务</span>
              </td>
              <td class="right">
                <el-input
                  type="text"
                  v-model="formPer.preoccupation"
                ></el-input>
              </td>
              <td class="left">
                <span class="red">个人邮箱</span>
              </td>
              <td class="right">
                <el-input
                  type="text"
                  v-model="formPer.email"
                ></el-input>
              </td>
            </tr>
            <tr>
              <td class="left">
                <span class="red">专业技术职务</span>
              </td>
              <td class="right">
                <el-input
                  type="text"
                  v-model="formPer.majoroccupation"
                ></el-input>
              </td>
             
              <td class="left">
                <span class="red">邮政编码</span>
              </td>
              <td class="right">
                <el-input
                  type="text"
                  v-model="formPer.postalcode"
                ></el-input>
              </td>
            </tr>
          </table>
        </el-form>
      </el-col>
    </el-row> -->
    <el-row>
      <el-col :span="24" class="apply_expense" style="padding-top:25px"
        >负责人信息（{{ userInfo.username }}）</el-col
      >
      <el-col :span="24">
        <el-form :model="formPer" :disabled="true">
          <table
            class="content-assistant content"
            border
            cellpadding="4"
            cellspacing="0"
            width="77%"
            height="174"
          >
            <tr>
              <td align="right" width="15%">性别</td>
              <td align="left" width="17.3%">{{ this.formPer.sex }}</td>
              <td align="right" width="15%">民族</td>
              <td align="left" width="17.3%">{{ this.formPer.nation }}</td>
              <td align="right" width="15%">出生日期</td>
              <td align="left" width="17.4%">{{ this.formPer.birth }}</td>
            </tr>
            <tr>
              <td align="right">政治面貌</td>
              <td align="left">{{ this.formPer.politics }}</td>
              <td align="right">最后学历</td>
              <td align="left">{{ this.formPer.edu }}</td>
              <td align="right">最后学位</td>
              <td align="left">{{ this.formPer.degree }}</td>
            </tr>
            <tr>
              <td align="right">行政职务</td>
              <td align="left">{{ this.formPer.preoccupation }}</td>
              <td align="right">专业技术职务</td>
              <td align="left">{{ this.formPer.majoroccupation }}</td>
              <td align="right">工作单位</td>
              <td align="left">{{ this.formPer.sch }}</td>
            </tr>
            <tr>
              <td align="right">职务级别</td>
              <td align="left">{{ this.formPer.jobrank }}</td>
              <td align="right">任职时间</td>
              <td align="left">{{ this.formPer.majortime }}</td>
              <td align="right">通讯地址</td>
              <td align="left">{{ this.formPer.address }}</td>
            </tr>
            <tr>
              <td align="right">个人qq</td>
              <td align="left">{{ this.formPer.qq }}</td>
              <td align="right">个人邮箱</td>
              <td align="left">{{ this.formPer.email }}</td>
              <td align="right">联系电话</td>
              <td align="left">{{ this.formPer.office }}</td>
            </tr>
          </table>
        </el-form>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" class="apply_expense" style="padding-top:25px"
        >{{ userInfo.username }}近五年研究成果</el-col
      >
      <el-col :span="24">
        <el-form :model="formPer" :disabled="true">
          <table class="content" border cellspacing="0" width="77%">
            <thead>
              <tr id="thead" height="30" align="center">
                <td><strong>成果名称</strong></td>
                <td><strong>出版单位</strong></td>
                <td><strong>出版时间</strong></td>
              </tr>
            </thead>
            <tbody>
              <tr v-if="achievements.length === 0" height="30" align="center">
                <td colspan="3">此人暂无相关研究成果</td>
              </tr>
              <tr
                v-for="item in achievements"
                :key="item.id"
                height="30"
                align="left"
              >
                <td class="table-one">{{ item.achievement_name }}</td>
                <td class="table-two">{{ item.publish_company }}</td>
                <td class="table-three">{{ item.publish_time }}</td>
              </tr>
            </tbody>
          </table>
        </el-form>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" class="apply_expense" style="padding-top:25px"
        >主要参加者信息</el-col
      >
      <el-col :span="24">
        <el-form :model="formPeos" :disabled="true">
          <table class="content" border cellspacing="0" width="77%">
            <thead>
              <tr id="thead" height="30" align="center">
                <td width="10%"><strong>姓名</strong></td>
                <td width="10%"><strong>性别</strong></td>
                <td width="10%"><strong>出生年月</strong></td>
                <td width="10%"><strong>职称</strong></td>
                <td width="10%"><strong>学位</strong></td>
                <td width="15%"><strong>学历</strong></td>
                <td width="15%"><strong>研究专长</strong></td>
                <td width="20%"><strong>工作单位</strong></td>
              </tr>
            </thead>
            <tbody>
              <tr
                v-for="item in major_peoples"
                :key="item.id"
                height="30"
                align="center"
              >
                <td>{{ item.name }}</td>
                <td>{{ item.sex }}</td>
                <td>{{ item.birth }}</td>
                <td>{{ item.jobrank }}</td>
                <td>{{ item.degree }}</td>
                <td>{{ item.edu }}</td>
                <td>{{ item.expertise }}</td>
                <td>{{ item.unit }}</td>
              </tr>
            </tbody>
          </table>
        </el-form>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" class="apply_expense" style="padding-top:25px"
        >经费预算（单位：万元）</el-col
      >
      <el-col :span="24">
        <el-form :model="formExpense" :disabled="true">
          <table class="content" border cellspacing="0" width="77%">
            <tr>
              <td class="left">
                <span class="red">资料费</span>
              </td>
              <td class="right">
                <el-input type="text" v-model="formExpense.book_fee"></el-input>
              </td>
              <td class="left">
                <span class="red">数据采集费</span>
              </td>
              <td class="right">
                <el-input type="text" v-model="formExpense.data_fee"></el-input>
              </td>
            </tr>
            <tr>
              <td class="left">
                <span class="red">差旅费</span>
              </td>
              <td class="right">
                <el-input
                  type="text"
                  v-model="formExpense.travel_fee"
                ></el-input>
              </td>
              <td class="left">
                <span class="red">会议费</span>
              </td>
              <td class="right">
                <el-input
                  type="text"
                  v-model="formExpense.meeting_fee"
                ></el-input>
              </td>
            </tr>
            <tr>
              <td class="left">
                <span class="red">国际交流合作费</span>
              </td>
              <td class="right">
                <el-input
                  type="text"
                  v-model="formExpense.international_fee"
                ></el-input>
              </td>
              <td class="left">
                <span class="red">设备费</span>
              </td>
              <td class="right">
                <el-input type="text" v-model="formExpense.equipment_fee"
                  >万</el-input
                >
              </td>
            </tr>
            <tr>
              <td class="left">
                <span class="red">专家咨询费</span>
              </td>
              <td class="right">
                <el-input
                  type="text"
                  v-model="formExpense.consulting_fee"
                ></el-input>
              </td>
              <td class="left">
                <span class="red">劳务费</span>
              </td>
              <td class="right">
                <el-input
                  type="text"
                  v-model="formExpense.labour_fee"
                ></el-input>
              </td>
            </tr>
            <tr>
              <td class="left">
                <span class="red">印刷费</span>
              </td>
              <td class="right">
                <el-input
                  type="text"
                  v-model="formExpense.print_fee"
                ></el-input>
              </td>
              <td class="left">
                <span class="red">管理费</span>
              </td>
              <td class="right">
                <el-input
                  type="text"
                  v-model="formExpense.administration_fee"
                ></el-input>
              </td>
            </tr>
            <tr>
              <td class="left">
                <span class="red">其他支出</span>
              </td>
              <td class="right">
                <el-input
                  type="text"
                  v-model="formExpense.other_fee"
                ></el-input>
              </td>
              <td class="left">
                <span class="red">合计</span>
              </td>
              <td class="right">
                <el-input type="text" v-model="formExpense.all_fee"></el-input>
              </td>
            </tr>
          </table>
        </el-form>
      </el-col>
    </el-row>
    <el-row>
      <el-col
        :span="12"
        class="apply_expense"
        style="padding-top:25px;padding-left: 7.7%"
      >
        <p>项目负责人所在单位审核意见</p>
        <table class="contentunitadv" border cellspacing="0" width="82%">
          <tr height="180">
            <td
              colspan="3"
              style="padding: 0 10px;outline: none; text-indent: 2em; text-align:left"
              v-text="advise.unitche"
              :contenteditable="contenteditable"
            ></td>
          </tr>
          <tr height="30">
            <td class="text-left">单位科研管理部门公章</td>
            <td></td>
            <td class="text-left">单 位 公 章</td>
          </tr>
          <tr height="30">
            <td class="text-left" style="padding-left:75px">
              <template>
                年 月 日
              </template>
            </td>
            <td></td>
            <td class="text-left">单位负责人签名：</td>
          </tr>
          <tr>
            <td></td>
            <td></td>
            <td class="text-left" height="30">
              <template>
                年 月 日
              </template>
            </td>
          </tr>
        </table>
      </el-col>
      <el-col
        :span="12"
        class="apply_expense"
        style="padding-top:25px;padding-right: 7.7%"
      >
        <p>省教育厅审核意见</p>
        <table class="contentunitadv" border cellspacing="0" width="82%">
          <tr height="180">
            <td
              colspan="3"
              style="padding: 0 30px;outline: none; text-indent: 2em; text-align:left"
              v-text="advise.eduche"
              :contenteditable="contenteditable"
            ></td>
          </tr>
          <tr height="30">
            <td></td>
            <td></td>
            <td style="text-align:right;padding-right:130px">审核人：</td>
          </tr>
          <tr height="20">
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr height="40">
            <td></td>
            <td></td>
            <td style="text-align:right;padding-right:137px">
              <template>
                年 月 日
              </template>
            </td>
          </tr>
        </table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import http from '../../../../assets/js/http.js'
import UE from '../../../ue.vue'
export default {
  props: {},
  data() {
    return {
      name: '22',
      advise: {
        unitche: '',
        eduche: ''
      },
      contenteditable: false,
      achievements: [],
      major_peoples: [],
      userInfo: Lockr.get('userInfo'),
      schs: Lockr.get('schsInfo'),
      support: Lockr.get('support'),
      editor: null,
      defaultMsg: '',
      config: {
        initialFrameHeight: 120,
        initialFrameWidth: null
      },
      sch_name: '',
      title: '',
      form: {
        title: '',
        theme: '',
        research_direction: '',
        type: '',
        finsih_time: '',
        word_count: ''
      },
      formPer: {
        sex: '',
        nation: '',
        birth: '',
        politics: '',
        edu: '',
        degree: '',
        preoccupation: '',
        majoroccupation: '',
        majortime: '',
        qq: '',
        office: '',
        address: '',
        postalcode: '',
        sch: '',
        jobrank: '',
        email: ''
      },
      formExpense: {
        book_fee: '',
        book_fee_basis: '',
        data_fee: '',
        data_fee_basis: '',
        travel_fee: '',
        travel_fee_basis: '',
        international_fee: '',
        international_fee_basis: '',
        labour_fee: '',
        labour_fee_basis: '',
        administration_fee: '',
        administration_fee_basis: '',
        print_fee: '',
        print_fee_basis: '',
        equipment_fee: '',
        equipment_fee_basis: '',
        consulting_fee: '',
        consulting_fee_basis: '',
        meeting_fee: '',
        meeting_fee_basis: '',
        other_fee: '',
        other_fee_basis: '',
        all_fee: ''
      },
      status: '0'
    }
  },
  methods: {
    // 初始化函数
    init() {
      this.getSupportType()
    },
    // 所在单位审核意见
    adviseche(status) {
      // console.log(status)
      if (status === 1 || status === 2) {
        this.advise.unitche = '高校尚未给出意见'
      } else if (status === 3) {
        this.advise.unitche = '高校不同意该项目参评'
      } else {
        this.advise.unitche = '高校同意该项目参评'
      }
      if (status >= 1 && status <= 4) {
        this.advise.eduche = '教育厅尚未给出意见'
      } else if (status === 5) {
        this.advise.eduche = '教育厅不同意该项目参评'
      } else {
        this.advise.eduche = '教育厅同意该项目参评'
      }
    },
    // editable: function (e, field, user) {
    //   let that = this
    //   that.$editable(e, function (value) {
    //     console.log(1)
    //     console.log(value)
    //   })
    // },
    // 获取项目类别的label
    // getSupportType() {
    //   let data = {}
    //   this.apiPost('admin/Report/DropdowmList', data).then((res) => {
    //     this.handelResponse(res, (data) => {
    //       Lockr.set('support', data.support)
    //     })
    //   })
    // },
    // 获取子项目所有相关信息便于查看
    getAllMsg() {
      let data = {
        id: this.$route.params.id
      }
      // console.log(data)
      this.apiPost('admin/Report/ChildrenList', data).then(res => {
        this.handelResponse(res, data => {
          // console.log(res)
          this.status = data.subproject[0].status
          this.adviseche(this.status)
          this.form = data.subproject[0]
          this.formPer = data.train[0]
          this.formExpense = data.fund[0]
          this.major_peoples = data.partner
          this.title = data.subproject[0].title
          this.formPer.sch = this.schs[this.formPer.sch - 1].sch_name
          if (data.subproject[0].support === 0) {
            this.form.support = '教育厅还未最终敲定'
          } else {
            this.form.support = this.support[this.form.support - 1].title
          }
          this.formPer.sex = data.train[0].sex === 1 ? '男' : '女'
          this.defaultMsg = data.subproject[0].achievement
          window.UE.getEditor('editor').setContent(this.defaultMsg)
          window.UE.getEditor('editor').setDisabled()
        })
      })
    },
    // 返回上一个界面
    back() {
      /*
        saveData保存的是大项下面的搜索
        endData保存的是结项时子项目的搜索
      */
      if (this.$route.params.endData) {
        router.push({
          name: 'stdetailpro',
          params: {
            id: this.$route.params.subId,
            endData: this.$route.params.endData,
            saveData: this.$route.params.saveData
          }
        })
      } else if (this.$route.params.reData) {
        router.push({
          name: 'detailpro',
          params: {
            id: this.$route.params.subId,
            reData: this.$route.params.reData,
            saveData: this.$route.params.saveData
          }
        })
      } else if (this.$route.params.midData) {
        router.push({
          name: 'middetailpro',
          params: {
            id: this.$route.params.subId,
            midData: this.$route.params.midData,
            saveData: this.$route.params.saveData
          }
        })
      }
    }
  },
  created() {
    _g.closeGlobalLoading()
    // this.init()
    this.getAllMsg()
  },
  watch: {},
  computed: {},
  components: { UE },
  mounted() {},
  mixins: [http]
}
</script>
<style scoped>
.wrapper {
  position: relative;
  border-radius: 3px;
  background: #fff;
  border-top: 3px solid #d2d6de;
  margin-bottom: 20px;
  width: 100%;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  border-top-color: #3c8dbc;
  padding-bottom: 50px;
}
.header {
  padding-left: 15px;
}
.title {
  padding: 30px 40px 0 0;
  float: right;
}
.intro {
  text-align: center;
  background-color: #add5fe;
  border-radius: 4px 4px 0 0;
  line-height: 30px;
  margin-bottom: 30px;
}
.cell-width {
  width: 90%;
}
.apply_expense {
  padding-bottom: 20px;
  font-family: '微软雅黑';
  font-weight: 800;
  text-align: center;
}
.editor {
  padding: 0 3.5% 0 12.5%;
}
.left {
  width: 18%;
  text-align: right;
  padding-right: 10px;
  font-family: '微软雅黑';
}
.right {
  width: 32%;
  padding: 4px;
}
.red {
  padding-right: 5px;
}
.content {
  margin: 0 auto;
  border-color: #e8f6f9;
  font-size: 14px;
}
.contentunitadv {
  margin: 0 auto;
  border: 1px solid black;
  font-size: 14px;
  padding-bottom: 30px;
}
.content tr:nth-child(even) {
  background: #fff;
}
.content tr:nth-child(odd) {
  background: #f2f9ff;
}
.content-assistant td:nth-child(even) {
  background: #fff;
}
.content-assistant td:nth-child(odd) {
  /* background: #f2f9ff; */
  background: linear-gradient(to bottom right, #e0edff, white);
}
#thead {
  background: linear-gradient(#c3dbff, white);
}
.table-two,
.table-one,
.table-three {
  padding-left: 20px;
}
.table-one {
  width: 40%;
}
.table-two {
  width: 35%;
}
.table-three {
  width: 25%;
}
.contentunitadv td {
  border: none;
}
.text-left {
  text-align: left;
  padding-left: 10px;
}
</style>
